Au cours des prochaines leçons, nous examinerons en profondeur le module de la fenêtre du navigateur.
Ceci, bien sûr, étant le module avec lequel créera des processus de rendu ou des fenêtres pour notre application.
Maintenant, nous avons déjà couvert une partie de cela en examinant la structure d'un électron.
Mais pour répéter, passons en revue un peu plus en détail.
À l'intérieur de notre fonction de création de fenêtre, nous attribuons à cette fenêtre principale de variable globale une nouvelle instance
de fenêtre de navigateur d'électrons pour laquelle nous avons besoin du module d'électrons.
Ici, nous configurons cette fenêtre de navigateur avec quelques paramètres définissant sa largeur à 1000 pixels et sa
hauteur à 800.
Et nous disons à Electron que nous voulons connaître Duchesse intégré dans ce processus de rendu en définissant l'intégration
des nœuds sur true sur le contenu Web Windows du navigateur, ce paramètre de préférence Web étant pour les options
de configuration sur le contenu Web.
Un autre sujet abordera en détail plus tard ceci nous donnant accès à connaître les doges à partir de nos fenêtres de
navigateur, des choses comme utiliser, require, etc.
Ensuite, une fois que nous avons une nouvelle fenêtre de navigateur ou un nouveau moteur de rendu, nous pouvons charger du
HTML dans cette fenêtre chrome en appelant load file avec le fichier HTML pour charger l'index dot html.
Un autre point important ici dans la documentation et les exemples plus anciens que vous verrez indexé sur HDMI chargé
avec la méthode load Eurail à la place.
Ce fichier est encore une fois obsolète et réduit est le bon moyen pour les nouvelles versions d'Electron.
Mais nous verrons un exemple de cela dans une seconde, puis ouvrirons les outils de développement de ce contenu Web dans la fenêtre du
navigateur avec les outils de développement ouverts.
Ce n'est que pour le développement, bien sûr.
Et enfin, enregistrez un écouteur lorsque cette fenêtre est fermée pour désactiver l'instance de fenêtre du navigateur.
OK, en ce qui concerne le chargement, le fichier par rapport au chargement de votre URL, voyons la différence.
Lors du chargement de contenu dans une fenêtre de navigateur, nous utilisons un fichier de chargement pour tout contenu local sur notre application.
Par exemple, dans ce fichier HTML indexé, il suffit de rechercher un fichier dans le répertoire courant.
Mais gardez à l'esprit que cette instance de fenêtre de navigateur est essentiellement une fenêtre de navigateur Chrome.
Nous ne sommes donc en aucun cas limités au chargement de contenu à partir de fichiers locaux.
Dans les versions antérieures d'Electron, nous aurions utilisé charger votre URL, en analysant un chemin de
fichier avec le protocole de fichier, ce qui signifie que cette méthode existe toujours pour charger des URL, pas des fichiers.
Voyons un exemple.
Nous n'avons pas besoin d'outils de développement, alors commentez.
Je vais dupliquer ce commentaire sur la version du fichier de chargement et appeler à la place load you rl
loading sur http s Google dot com save.
Je vais démarrer l'application avec la commande watch.
Prend une seconde pendant le téléchargement du contenu et le HDMI de Google dot com se charge dans notre
fenêtre principale.
Si simple, mais comme vous l'avez probablement remarqué, le chargement de contenu distant n'est pas si gracieux et doit être évité
dans la mesure du possible.
Nous voulons que nos applications de bureau soient rapides, donc les fichiers locaux sont certainement la voie à suivre, en évitant la fenêtre
vide initiale pendant le chargement du contenu.
Cela dit, nous obtenons toujours une partie de ce scintillement d'écran vide lors du chargement d'un fichier local.
Je vais changer cela pour charger le fichier pour le HTML indexé.
Et maintenant, immédiatement, au fur et à mesure que j'enregistre Main, ce qui rechargera l'application, je passerai à l'application afin
que nous puissions la voir apparaître et rechercher ce scintillement d'une fenêtre vide.
Leur index, HDMI, est chargé presque instantanément, mais nous pouvons certainement voir un scintillement quelque peu méchant, ce ne sera, bien sûr,
pas un problème pour chaque application, mais dans le cas d'une interface couleur comme
celle-ci, ce sera perceptible.
Encore une fois, le but ici est de faire en sorte que notre électronique ressemble à des applications natives.
Cela devrait donc être traité plus gracieusement dans les documents.
Nous avons une petite section sur la façon de faire simplement cette fenêtre d'affichage avec élégance avec deux façons d'y parvenir.
Tout d'abord, nous pouvons utiliser les fenêtres du navigateur prêtes à afficher l'événement en masquant la fenêtre jusqu'à ce que tout son contenu
soit chargé.
Voyons cela à l'esprit.
Commencez par définir la fenêtre du navigateur pour qu'elle soit masquée, en passant initialement
un nouveau paramètre de configuration lors de sa création.
Nous ne pourrons pas voir la fenêtre.
Ajoutez ensuite un nouvel écouteur dans cette fenêtre de navigateur.
La fenêtre principale d'Instant est prête à être affichée.
Mais comme cet événement ne se déclenchera qu'une seule fois, la meilleure alternative serait d'écouter une fois simplement en disant savoir
de supprimer cet auditeur après qu'il a été déclenché, en économisant un peu de mémoire, et comme ce rappel
d'événement le transmettra à la fenêtre de la mienne dot show .
Appelez donc la méthode show sur la fenêtre principale.
Lorsqu'il y a des incendies tous manuellement, accédez à l'application avant qu'elle ne se lance à nouveau pour mieux observer cette sauvegarde.
Et ils sont toujours un très léger scintillement, mais cela a plus à voir avec le succès en cours de traitement que le contenu
en cours de chargement.
L'inconvénient de cette première option pour afficher la fenêtre avec élégance est qu'elle peut retarder un peu le lancement
perçu de l'application.
Donc, comme alternative plus simple, nous avons une deuxième option, changer la couleur de cette fenêtre initialement vide.
Je vais me débarrasser de cet auditeur.
Et au lieu de la fenêtre masquée au départ, je définirai sa couleur d'arrière-plan.
À la même couleur principale utilisée dans la sauvegarde du contenu.
Et cette fois, nous ne pouvons voir aucune trace d'un scintillement blanc car le contenu réel est chargé
de manière transparente sur ce fond bleu, donc deux approches différentes basées sur ce qui fonctionnera le mieux pour votre application.
Ensuite, nous verrons comment créer plusieurs fenêtres et les configurer en tant que configurations parent-enfant.